<template>
    <div class="main-content">
        <div class="search">
            <div class="back">
                <Back>
                    <!-- <div class="form-btn">
                        <el-input style="width: 180px;" placeholder="手机号" v-model="params.phone" clearable
                            @change="getTable"></el-input>
                        <el-input style="width: 180px;" placeholder="名称" v-model="params.name" clearable
                            @change="getTable"></el-input>
                        <el-button class="ico-button" @click="refresh">
                            <el-icon>
                                <Refresh />
                            </el-icon>
                        </el-button>
                    </div> -->
                </Back>
            </div>
        </div>
        <div class="table">
            <div class="table-main">
                <el-table :data="table.data" resizable border show-overflow-tooltip max-height="100%" height="100%"
                    v-loading="table.load">
                    <template v-for="row in table.column">
                        <el-table-column :label="row.label" :prop="row.key" :width="row.width" :align="row.align"
                            :fixed="row.fixed">
                            <template #default="scope">
                                <span v-if="row.key == 'type'">
                                    <el-tag type="success" v-if="scope.row[row.key] == 1">充值</el-tag>
                                    <el-tag type="danger" v-if="scope.row[row.key] == 2">消费</el-tag>
                                </span>
                                <span v-else>
                                    {{ scope.row[row.key] }}
                                </span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
            </div>
            <div class="page">
                <el-pagination v-model:current-page="pages.page" v-model:page-size="pages.page_size"
                    :page-sizes="[30, 50, 100, 200, 300, 500]" :small="true" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="pages.count"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup name="BalanceList">

const { proxy } = getCurrentInstance()

// 搜索表单 下拉收起 start 
const isFold = ref(false)
function switchFold() {
    isFold.value = !isFold.value
}
// 搜索表单 下拉收起 end

// 表格字段配置 start
const table = reactive({
    load: false,
    column: [
        { label: '订单', key: 'order_sn', width: 'auto', show: true, align: 'center' },
        { label: '类型', key: 'type', width: 'auto', show: true, align: 'center' },
        { label: '操作金额', key: 'amount', width: 'auto', show: true, align: 'center' },
        { label: '当前余额', key: 'balance', width: 'auto', show: true, align: 'center' },
        { label: '操作时间', key: 'create_time', width: 'auto', show: true, align: 'center' },
    ],
    data: []
})
// 表格字段配置 end 

onMounted(() => {
    getTable()
})

// 页面数据 start
const params = reactive({
    id: 0,
})
const pages = reactive({
    page: 1,
    page_size: 30,
    count: 0
})

function handleSizeChange(val) {
    pages.page_size = val
    getTable()
}
function handleCurrentChange(val) {
    pages.page = val
    getTable()
}
function refresh() {
    pages.page = 1
    getTable()
}
async function getTable() {
    params.id = proxy.$route.query.id;
    table.load = true
    let res = await proxy.$get('RechargeRecordList', {
        page: pages.page,
        page_size: pages.page_size,
        ...params
    }, false)
    table.load = false
    if (res.code === 0) {
        table.data = res.data.list || []
        pages.count = res.data.total ? Number(res.data.total) : 0
    }
}

</script>
<style scoped>
.read-the-docs {
    color: #888;
}
</style>